<template>
    <div>
      <div class="gva-search-box">
        <el-form ref="searchForm" :inline="true" :model="searchInfo">
          <el-form-item label="">
            <el-input v-model="searchInfo.DID" placeholder="请输入用户名称" />
          </el-form-item>
          <el-form-item label="">
            <el-input v-model="searchInfo.DID" placeholder="请输入数据名称" />
          </el-form-item>
          <el-form-item>
          <el-select
            v-model="searchInfo.method"
            clearable
            placeholder="请选择审核状态"
          >
            <el-option
              v-for="item in methodOptions"
              :key="item.value"
              :label="`${item.label}(${item.value})`"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="search" @click="onSubmit">查询</el-button>
            <el-button icon="refresh" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="gva-table-box">
        <div class="gva-btn-list">
         <!--  <el-button type="primary" icon="plus" @click="openDrawer('新增', null)">新增用户</el-button> -->
         <!--  <el-button icon="delete" :disabled="!selectedUsers.length" @click="onDelete">删除</el-button> -->
          <el-button icon="refresh" @click="onFresh">刷新</el-button>
          <ExportExcel template-id="" :limit="9999" />
          <ImportExcel template-id="" @on-success="getTableData" />
        </div>
        <el-table :data="sortedTableData" @selection-change="handleSelectionChange" @sort-change="sortChange">
         <!--  <el-table-column type="selection" width="55" /> -->
          <el-table-column align="left" label="序号" min-width="80" prop="OrderId" sortable="custom" />
          <el-table-column align="left" label="购买用户名" min-width="150" prop="UserName" sortable="custom" />
          <el-table-column align="left" label="DID" min-width="180" prop="DID" />
          <el-table-column align="left" label="价格" min-width="150" prop="UserPhone" />
          <el-table-column align="left" label="数据名称" min-width="150" prop="IdCard" />
          <el-table-column align="left" label="审核进度" min-width="150" prop="ApplyProcess" sortable="custom" />
          <el-table-column align="left" label="审核状态" min-width="150" prop="ApplyStatus" sortable="custom" />
          <el-table-column align="left" fixed="right" label="操作" width="200">
            <template #default="scope">
              <el-button icon="edit" type="primary" link @click="openDrawer('编辑', scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="gva-pagination">
          <el-pagination
              :current-page="page"
              :page-size="pageSize"
              :page-sizes="[10, 30, 50, 100]"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
          />
        </div>
      </div>
  
      <!-- 新增/编辑用户抽屉 -->
      <el-drawer v-model="drawerVisible" size="60%" :before-close="closeDrawer" :show-close="false">
        <template #header>
          <div class="flex justify-between items-center">
            <span class="text-lg">{{ drawerTitle }}</span>
            <div>
              <el-button @click="closeDrawer">取消</el-button>
              <el-button type="primary" @click="submitForm">确定</el-button>
            </div>
          </div>
        </template>
  
        <el-form ref="userForm" :model="userInfo" :rules="rules" label-width="100px">
          <el-form-item label="序号" prop="OrderId">
            <el-input v-model="userInfo.OrderId" autocomplete="off" />
          </el-form-item>
          <el-form-item label="购买用户名" prop="UserName">
            <el-input v-model="userInfo.UserName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="DID" prop="DID">
            <el-input v-model="userInfo.DID" autocomplete="off" />
          </el-form-item>
          <el-form-item label="价格" prop="UserPhone">
            <el-input v-model="userInfo.UserPhone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="数据名称" prop="IdCard">
            <el-input v-model="userInfo.IdCard" autocomplete="off" />
          </el-form-item>
          <el-form-item label="审核进度" prop="ApplyProcess">
            <el-input v-model="userInfo.ApplyProcess" autocomplete="off" />
          </el-form-item>
          <el-form-item label="审核状态" prop="ApplyStatus">
            <el-input v-model="userInfo.ApplyStatus" autocomplete="off" />
          </el-form-item>
        </el-form>
      </el-drawer>
    </div>
  </template>
  
  
  
  
  <script setup>
  import { ref, reactive, computed } from 'vue'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import ExportExcel from '@/components/exportExcel/exportExcel.vue'
  import{getDataShareCheckList}from '@/api/datashare'
  // import{getDataShareCheckList}from'@/api/getDataShareCheckList'
  

  const methodOptions = ref([
  {
    value: '1',
    label: '已通过',
    type: 'success'
  },
  {
    value: '2',
    label: '已驳回',
    type: ''
  },
  {
    value: '0',
    label: '申请中',
    type: 'warning'
  }

])
  // 原始数据
  const originalTableData = [
    
  ]
  
  // 分页相关数据
  const page = ref(1)
  const total = ref(originalTableData.length)
  const pageSize = ref(10)
  
  // 表格数据
  const tableData = ref([...originalTableData])
  
  // 搜索信息
  const searchInfo = reactive({ DID: '' })
  
  // 选中的用户
  const selectedUsers = ref([])
  
  // 抽屉的显示状态及标题
  const drawerVisible = ref(false)
  const drawerTitle = ref('')
  
  // 用户信息
  const userInfo = reactive({
    OrderId: '',
    DID: '',
    UserName: '',
    UserPhone: '',
    IdCard: '',
    ApplyProcess: '',
    ApplyStatus: ''
  })
  const filteredData = ref([])
  
  // 表单验证规则
  const rules = ref({
    DID: [{ required: true, message: '请输入DID', trigger: 'blur' }],
    userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
    idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],
    phone: [{ required: true, pattern: /^1[3456789]\d{9}$/, message: '请输入有效的手机号', trigger: 'blur' }],
    bankCard: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
    auditProgress: [{ required: true, message: '请输入审核进度', trigger: 'blur' }],
    auditStatus: [{ required: true, message: '请输入审核状态', trigger: 'blur' }]
  })
  
  // 排序信息
  const sortInfo = ref({ prop: '', order: '' })
  
  // 获取排序后的数据
  const sortedTableData = computed(() => {
    const data = [...tableData.value]
    if (sortInfo.value.prop && sortInfo.value.order) {
      data.sort((a, b) => {
        const aValue = a[sortInfo.value.prop]
        const bValue = b[sortInfo.value.prop]
  
        if (typeof aValue === 'string') {
          return sortInfo.value.order === 'ascending'
              ? aValue.localeCompare(bValue)
              : bValue.localeCompare(aValue)
        } else if (typeof aValue === 'number') {
          return sortInfo.value.order === 'ascending'
              ? aValue - bValue
              : bValue - aValue
        } else {
          return 0
        }
      })
    }
    return data
  })
  
  // 搜索按钮点击事件
  const onSubmit = () => {
    const searchDID = searchInfo.DID.toLowerCase()
    tableData.value = originalTableData.value.filter(item =>
        item.DID.toLowerCase().includes(searchDID)
    )
    total.value = tableData.value.length
    console.log('搜索信息', searchInfo)
    // 这里可以添加请求数据的逻辑
  }
  
  // 重置按钮点击事件
  const onReset = () => {
    searchInfo.DID = ''
    tableData.value = [...originalTableData.value]
    total.value = originalTableData.value.length
    page.value = 1 // 重置分页到第1页
    console.log('重置搜索信息', searchInfo)
    // 这里可以添加请求数据的逻辑
  }
  
  // 打开抽屉
  const openDrawer = (title, row) => {
    drawerTitle.value = title === '新增' ? '新增用户' : '查看详情'
    if (row) {
      userInfo.OrderId = row.OrderId
      userInfo.UserName = row.UserName
      userInfo.DID = row.DID
      userInfo.UserPhone = row.UserPhone
      userInfo.IdCard = row.IdCard
      userInfo.ApplyProcess = row.ApplyProcess
      userInfo.ApplyStatus = row.ApplyStatus
    } else {
      userInfo.OrderId = ''
      userInfo.UserName = ''
      userInfo.DID = ''
      userInfo.UserPhone = ''
      userInfo.IdCard = ''
      userInfo.ApplyProcess = ''
      userInfo.ApplyStatus = ''
    }
    drawerVisible.value = true
  }
  
  // 关闭抽屉
  const closeDrawer = () => {
    drawerVisible.value = false
  }
  
  // 提交表单
  const submitForm = () => {
    // 提交表单逻辑
    console.log('提交表单数据', userInfo)
    // 这里可以添加逻辑来处理表单数据，例如发送到服务器
    closeDrawer()
  }
  
  // 删除按钮点击事件
  const onDelete = () => {
    ElMessageBox.confirm('确定要删除吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      ElMessage({ type: 'success', message: '删除成功' })
      // 删除按钮逻辑
    }).catch(() => {
      console.log('取消删除')
    })
  }
  
  // 刷新按钮点击事件
  const onFresh = () => {
    ElMessageBox.confirm('确定要刷新吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      ElMessage({ type: 'success', message: '刷新成功' })
      // 刷新按钮逻辑
    }).catch(() => {
      console.log('取消刷新')
    })
  }
  
  // 选择变化处理
  const handleSelectionChange = (val) => {
    selectedUsers.value = val
    console.log('选择变化', val)
    // 选择变化逻辑
  }
  
  // 处理排序变化
  const sortChange = ({ prop, order }) => {
    sortInfo.value = { prop, order }
    console.log('排序信息', sortInfo)
  }
  
  // 获取表格数据
  const getTableData = async () => {
    try {
      const response = await getDataShareCheckList(page.value, pageSize.value);
      
      tableData.value = response.data.AuditList || []; // 确保是数组
      //  Check if tableData is empty and use fake data if necessary
      //  if (tableData.value.length === 0) {
      //   chooseOne(); // Populate with fake data
      // }
      // chooseOne();
      originalTableData.value=tableData.value;
      total.value = response.data.TotalNum;
      
      filteredData.value = [...tableData.value];
       // 重置为有效数据
      console.log('response:',response.data)
      console.log('table:',tableData)
      console.log('originalTableData:',originalTableData)
  
    } catch (error) {
      console.error('API Error:', error);
      ElMessage.error('获取数据失败');
    }
  }
  
  const chooseOne = () => {
    tableData.value = [
      { DID: '001', userName: 'alice', idCard: '3101', phone: '11232323116', auditStatus: '审核中' ,bankCard:'123312123657',auditProgress:'审核中'},
      { DID: '002', userName: 'lisa', idCard: '3102', phone: '11232323117', auditStatus: '已通过' ,bankCard:'123123121323',auditProgress:'已审核'},
      { DID: '003', userName: 'lily', idCard: '3103', phone: '11232323118', auditStatus: '审核中' ,bankCard:'123123123123',auditProgress:'未审核'},
      { DID: '004', userName: 'spider', idCard: '3104', phone: '11232323119', auditStatus: '审核中' ,bankCard:'123123312312',auditProgress:'未审核'},
      { DID: '005', userName: 'mark', idCard: '3105', phone: '11232323120', auditStatus: '已驳回' ,bankCard:'345435578675',auditProgress:'已审核'},
      { DID: '006', userName: 'jack', idCard: '3106', phone: '11232323121', auditStatus: '已通过' ,bankCard:'235324647576',auditProgress:'已审核'},
    ];
    total.value = tableData.value.length; // Update total count
  }
  
  
  getTableData()
  </script>
  
  
  
  
  
  <style scoped lang="scss">
  .warning {
    color: #dc143c;
  }
  </style>
  